<template>
  <div>
    <div class="title">周末去哪儿玩</div>
    <ul>
      <li class="item" v-for="item of list" :key="item.id">
        <div class="item-img-box">
          <img :src="item.imgUrl" class="item-img"/>
        </div>
        <div class="item-info">
          <p class="item-title" v-text="item.title"></p>
          <p class="item-desc" v-text="item.desc"></p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HomeWeekend',
  props: {
    list: Array
  },
  data () {
    return {
      recommendList: [
        {
          id: '0001',
          title: '郑州必游TOP10',
          imgUrl: 'http://img1.qunarzz.com/sight/source/1505/86/57819390ea997c.jpg_r_640x214_00888590.jpg'
        },
        {
          id: '0002',
          title: '康百万庄园',
          imgUrl: 'http://img1.qunarzz.com/sight/source/1505/84/2967ce31459e0a.jpg_r_640x214_8fc5fe97.jpg'
        },
        {
          id: '0003',
          title: '新乡必游TOP5',
          imgUrl: 'http://img1.qunarzz.com/sight/source/1606/59/996c626596a5f6.jpg_r_640x214_54c8b946.jpg',
          desc: '签到新乡好玩'
        },
        {
          id: '0004',
          title: '世纪欢乐园',
          imgUrl: 'http://img1.qunarzz.com/sight/source/1603/89/a64d5966351b04.jpg_r_640x214_45776b4c.jpg'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~styles/mixins.scss";
  .title{
    line-height: .8rem;
    background: #eee;
    text-indent: .2em;
  }
  .item{
    .item-img-box{
      height: 0;
      overflow: hidden;
      padding-bottom: 37.09%;
      .item-img{
        width: 100%;
      }
    }
    .item-info{
      padding: .1rem;
      min-width: 0;
      .item-title{
        line-height: .54rem;
        font-size:.32rem;
        @include ellipsis;
      }
      .item-desc{
        line-height: .4rem;
        color:#ccc;
        @include ellipsis
      }
    }
  }
</style>
